<template>
  <div ref="wrapperRef" class="scroll-wrapper">
    <slot></slot>
  </div>
</template>

<script setup>
import {onMounted, onUpdated, nextTick, ref} from 'vue'
import BScroll from 'better-scroll'

let bs = null
const wrapperRef = ref(null)

/* 更多配置查阅better-scroll文档：https://better-scroll.github.io/docs/zh-CN/guide/ */
defineProps({
  probeType: {
    type: Number,
    default: 1
  },
  // 点击列表是否派发click事件
  click: {
    type: Boolean,
    default: true
  },
  // 是否开启横向滚动
  scrollX: {
    type: Boolean,
    default: false
  },
  // 是否派发滚动事件
  listenScroll: {
    type: Boolean,
    default: false
  },
  // 列表的数据
  scrollData: {
    type: Array,
    default: null
  },
  // 是否派发滚动到底部的事件，用于上拉加载
  pullup: {
    type: Boolean,
    default: false
  },
  // 是否派发顶部下拉的事件，用于下拉刷新
  pulldown: {
    type: Boolean,
    default: false
  },
  // 是否派发列表滚动开始的事件
  beforeScroll: {
    type: Boolean,
    default: false
  },
  // 当数据更新后，刷新scroll的延时
  refreshDelay: {
    type: Number,
    default: 20
  }
})

onMounted(async () => {
  await nextTick()
  initScroll()
})
onUpdated(() => {
  bs.refresh()
})

// 初始化better-scroll
function initScroll() {
  bs = new BScroll(wrapperRef.value, {
    probeType: 3,
    click: true
  })
}
</script>

<style lang="less" scoped>
.scroll-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: scroll;
  touch-action: pan-y;
}
</style>